/**
 * 网页WebView
 * @author Jim
 * @date 2019/12/18
 * @update 2020/01/18
 */
import React, {PureComponent} from 'react';
import {WebView} from 'react-native-webview';
// import Header from '../../components/Header';
import Navigation from '../../utils/Navigation';
import {StatusBarHeight} from '../../global/Device';

import {
  StyleSheet,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
  Image,
  Clipboard,
} from 'react-native';
import {getVideoUrl} from '../../utils/videoUtil';
export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    const {uri, title} = this.props.navigation.state.params;
    console.log(uri);
    this.state = {
      url: uri,
      title: title,
      canGoBack: false,
    };
  }

  onChange(e) {
    this.setState({
      canGoBack: e.canGoBack,
      url: e.url,
    });
  }

  goBackEvent() {
    if (this.state.canGoBack) {
      this.webView.goBack();
    } else {
      Navigation.pop();
    }
  }

  render() {
    return (
      <>
        <View style={styles.header}>
          <StatusBar
            barStyle={'dark-content'}
            translucent={true}
            backgroundColor={'rgba(0,0,0,0)'}
          />
          <TouchableOpacity
            activeOpacity={1}
            style={styles.header_back}
            onPress={() => {
              this.goBackEvent();
            }}>
            <Image
              source={require('../../images/back.png')}
              color={'#999999'}
            />
          </TouchableOpacity>
          <Text style={styles.header_body_text} numberOfLines={1}>
            {this.state.title}
          </Text>
        </View>
        {/* <Header goBack={this.goBackEvent()} title={this.state.title} /> */}
        <View style={styles.btn}>
          <TouchableOpacity
            style={styles.video}
            activeOpacity={0.8}
            onPress={() => {
              console.log(this.state.url);
              var playUrl = this.state.url;
              // https://m.v.qq.com/x/cover/m/mzc00200jtdt7kn.html 腾讯
              // https://m.iqiyi.com/v_2ffkwya1z7s.html  //爱奇艺
              // https://m.mgtv.com/b/340817/9739347.html 芒果Tv
              //以上要去M
              if (
                playUrl.indexOf('v.qq.com') > 0 ||
                playUrl.indexOf('iqiyi.com') > 0 ||
                playUrl.indexOf('mgtv.com') > 0
              ) {
                playUrl = playUrl.replace('https://m.', 'https://');
              }

              // https://m.tv.sohu.com/v6216439.shtml?aid=9625683&channeled=1210020001&columnid=4619  搜狐去掉m.
              Navigation.push('playVideo', {
                title: '视频',
                uri: playUrl,
              });
            }}>
            <Text style={{fontSize: 20, color: '#fff'}}>播放</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.btn1}>
          <TouchableOpacity
            style={styles.video}
            activeOpacity={0.8}
            onPress={() => {
              var playUrl = this.state.url;
              //以上要去M
              if (
                playUrl.indexOf('v.qq.com') > 0 ||
                playUrl.indexOf('iqiyi.com') > 0 ||
                playUrl.indexOf('mgtv.com') > 0
              ) {
                //
                playUrl = playUrl.replace('https://m.', 'https://');
              }
              playUrl = playUrl = getVideoUrl(playUrl);
              //playUrl = "http://jx.quanmingjiexi.com/?url="+playUrl;
              Clipboard.setString(playUrl);
            }}>
            <Text style={{fontSize: 15, color: '#fff'}}>复制链接</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.btn2}>
          <TouchableOpacity
            style={styles.video}
            activeOpacity={0.8}
            onPress={() => {
              Navigation.pop();
            }}>
            <Text style={{fontSize: 20, color: '#fff'}}>退出</Text>
          </TouchableOpacity>
        </View>
        <WebView
          ref={(webView) => (this.webView = webView)}
          style={{flex: 1}}
          source={{uri: this.state.url}}
          startInLoadingState={true}
          onNavigationStateChange={(e) => this.onChange(e)}
        />
      </>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    position: 'relative',
    height: 36 + StatusBarHeight + 10,
    flexDirection: 'row',
    paddingTop: StatusBarHeight + 5,
    paddingBottom: 5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F4F4F4',
    zIndex: 10000,
  },
  header_back: {
    marginLeft: 15,
    marginRight: 5,
  },
  header_body_text: {
    flex: 1,
    fontSize: 18,
    fontWeight: 'bold',
    paddingLeft: 10,
  },
  btn: {
    width: 80,
    height: 30,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 150,
    right: -10,
    zIndex: 100,
    borderRadius: 10,
  },
  btn1: {
    width: 80,
    height: 30,
    backgroundColor: 'blue',
    position: 'absolute',
    bottom: 100,
    right: -10,
    zIndex: 100,
    borderRadius: 10,
  },
  btn2: {
    width: 80,
    height: 30,
    backgroundColor: 'blue',
    position: 'absolute',
    bottom: 50,
    right: -10,
    zIndex: 100,
    borderRadius: 10,
  },
  video: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
